<%-- 
    Document   : template
    Created on : Aug 18, 2014, 5:50:08 AM
    Author     : HT
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Account Settings</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="resources/main/css/bootstrap.min.css"
	rel="stylesheet">
<link type="text/css"
	href="resources/main/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="resources/main/css/theme.css"
	rel="stylesheet">
<link type="text/css" href="resources/main/css/font-awesome.css"
	rel="stylesheet">
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<%-- 
    Java Script
    --%>
<script src="resources/main/js/jquery-ui-1.10.1.custom.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/jquery-1.9.1.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.validate.min.js"></script>
<style type="text/css" rel="stylesheet">
table {
	color: black;
	font-size: 13px;
}

label {
	color: black;
}

label.valid {
	width: 24px;
	height: 24px;
	background: url(resources/signin/img/valid.png) center center no-repeat;
	display: inline-block;
	text-indent: -9999px;
	position: relative;
	top:8px;
}

label.error {
	font-weight: bold;
	color: red;
	padding: 2px 8px;
	margin-top: 2px;
}
</style>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<%@include file="head-banner.jsp"%>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<%@include file="left-banner.jsp"%>
				<!--/.span3-->
				<div class="span9">
					<div class="content" style="width: 100%; margin-left: 10px">
						<div class="module">
							<div class="">
								<div class="module-head">
									<h3>General Account Settings</h3>
								</div>
								<div id="searchAlert" class="alert alert-info htl_alert"
									role="alert">${message}</div>
								<div class="module-body table">
									<table class="table table-striped table-hover">
										<tbody>
											<tr>
												<td
													style="text-align: left; font-weight: bold; color: black; width: 20%">Username</td>
												<td style="text-align: left; font-style: italic; width: 70%">${user}
												</td>
												<td
													style="text-align: right; font-weight: bold; color: black; width: 10%"></td>
											</tr>
											<c:forEach var="listAccount" items="${listAcc}">
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black; width: 20%">Fullname</td>
													<td
														style="text-align: left; font-style: italic; width: 70%">${listAccount.accountFirstName}
														${listAccount.accountLastName}
														${listAccount.accountMidName}



														<form id="formFullName" action="adminChangeFullName.html"
															method="post" style="font-style: normal">
															<div id="panelFullname"
																style="text-align: left; display: none; margin-top: 10px;">

																<div class="" style="width: 320px;">
																	<label for="">First Name: *</label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id="txtFirstName"
																			placeholder="First Name" name="txtFirstName" style="width: 220px;"
																			autofocus value="${listAccount.accountFirstName}">
																	</div>
																</div>
																<div class="" style="width: 320px;">
																	<label for="">Last Name: *</label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id="txtLastName"
																			placeholder="Middle Name" name="txtLastName" style="width: 220px;"
																			value="${listAccount.accountLastName}">
																	</div>
																</div>
																<div class="" style="width: 320px;">
																	<label for="">Middle Name: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id="txtMidName"
																			placeholder="Last Name" name="txtMidName" style="width: 220px;"
																			value="${listAccount.accountMidName}">
																	</div>
																</div>
																<div class="">
																	<div class="controls clearfix">
																		<button type="submit"
																			class="btn btn-primary pull-left" style="">Save</button>
																		<button type="reset" class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Refresh</button>
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right; width: 10%"><a
														id="editFullName">Edit</a></td>
												</tr>
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black">ID
														Card Number</td>
													<td style="text-align: left; font-style: italic">${listAccount.accountIDCardNumber}
														<form id="formIDCardNumber"
															action="adminChangeIdCardNumber.html" method="post"
															style="font-style: normal">
															<div id="panelCardNumber"
																style="text-align: left; display: none; margin-top: 10px;">
																<div class="" style="width: 320px;">
																	<label for="">Card Numbers: *</label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id=""
																			placeholder="Card Number" name="txtIdCardNumber" style="width: 220px;"
																			value="${listAccount.accountIDCardNumber}">
																		<div id="message"
																			style="display: block; color: coral;"></div>
																	</div>
																</div>
																<div class="">
																	<div class="controls clearfix">
																		<button type="submit"
																			class="btn btn-primary pull-left" style="">Save</button>
																		<button type="reset" class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Refresh</button>
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right"><a id="editCardNumber">Edit</a>
													</td>
												</tr>
												<tr>
											
													<td
														style="text-align: left; font-weight: bold; color: black; width: 20%">Password</td>
													<td
														style="text-align: left; font-style: italic; width: 70%">******************
														<form id="formUpdatePassword" action="adminChangePassword.html" method="post"
															style="font-style: normal">
															<div id="panelPassword"
																style="text-align: left; display: none; margin-top: 10px;">
																<div class="" style="width: 220px;">
																	<label for="">Current Password: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="password" id="oldPassword"
																			placeholder="Current Password" name="oldPassword">
																	</div>
																</div>
																<div class="" style="width: 220px;">
																	<label for="">New Password: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="password" id="newPassword"
																			placeholder="New Password" name="newPassword">
																	</div>
																</div>
																<div class="" style="width: 220px;">
																	<label for="">Confirm New Password: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="password" id="confirmNewPassword"
																			placeholder="Confirm New Password"
																			name="confirmNewPassword">
																	</div>
																</div>
																<div class="" style="margin-top: 10px;">
																	<div class="controls clearfix">
																		<button type="submit"
																			class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Save</button>
																		<button type="reset" class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Refresh</button>
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right; width: 10%"><a
														id="editPassword">Edit</a></td>
												</tr>
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black; width: 20%">Phone</td>
													<td
														style="text-align: left; font-style: italic; width: 70%">
														${listAccount.accountPhone1}
														<form id="formPhone" action="adminChangePhone.html"
															method="post" style="font-style: normal">
															<div id="panelPhone"
																style="text-align: left; display: none; margin-top: 10px;">
																<div class="" style="width: 320px;">
																	<label for="">Phone1: *</label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id="txtPhone1"
																			value="${listAccount.accountPhone1}" name="txtPhone1" style="width: 220px;"
																			placeholder="Phone 1">
																		<div id="message"
																			style="display: block; color: coral;"></div>
																	</div>
																	<label for="">Phone2: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id="txtPhone2"
																			value="${listAccount.accountPhone2}" name="txtPhone2" style="width: 220px;"
																			placeholder="Phone 2">

																	</div>
																</div>
																<div class="">
																	<div class="controls clearfix">
																		<button type="submit"
																			class="btn btn-primary pull-left" style="">Save</button>
																		<button type="reset" class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Refresh</button>
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right; width: 10%"><a
														id="editPhone">Edit</a></td>
												</tr>
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black; width: 20%">Address</td>
													<td
														style="text-align: left; font-style: italic; width: 70%">
														${listAccount.accountAddress1}
														<form id="formAddress" action="adminChangeAddress.html"
															method="post" style="font-style: normal">
															<div id="panelAddress"
																style="text-align: left; display: none; margin-top: 10px;">
																<div class="" style="width: 320px;">
																	<label for="">Address1: *</label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id="txtAddress1"
																			value="${listAccount.accountAddress1}" style="width: 220px;"
																			placeholder="Address 1" name="txtAddress1">
																		<div id="message"
																			style="display: block; color: coral;"></div>
																	</div>
																	<label for="">Address2: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id="txtAddress2" 
																			value="${listAccount.accountAddress2}" style="width: 220px;"
																			placeholder="Address 2" name="txtAddress2">
																	</div>
																</div>
																<div class="">
																	<div class="controls clearfix">
																		<button type="submit"
																			class="btn btn-primary pull-left" style="">Save</button>
																		<button type="reset" class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Refresh</button>
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right; width: 10%"><a
														id="editAddress">Edit</a></td>
												</tr>
												<tr>
													<td
														style="text-align: left; font-weight: bold; color: black; width: 20%">Email</td>
													<td
														style="text-align: left; font-style: italic; width: 70%">${listAccount.accountEmail1}
														<form id="formEmail" action="adminChangeEmail.html"
															method="post" style="font-style: normal">
															<div id="panelEmail"
																style="text-align: left; display: none; margin-top: 10px;">
																<div class="" style="width: 320px;">
																	<label for="">Email 1: *</label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id=""
																			value="${listAccount.accountEmail1}" style="width: 220px;"
																			placeholder="Email 1" name="txtEmail1">
																		<div id="
"
																			style="display: block; color: coral;"></div>
																	</div>
																	<label for="">Email 2: </label>
																	<div class="controls row-fluid">
																		<input class="span12" type="text" id=""
																			value="${listAccount.accountEmail2}" style="width: 220px;"
																			placeholder="Email 2" name="txtEmail2">
																	</div>
																</div>
																<div class="">
																	<div class="controls clearfix">
																		<button type="submit"
																			class="btn btn-primary pull-left" style="">Save</button>
																		<button type="reset" class="btn btn-primary pull-left"
																			style="margin-left: 15px;">Refresh</button>
																
																	</div>
																</div>
															</div>
														</form>
													</td>
													<td style="text-align: right; width: 10%"><a
														id="editEmail">Edit</a></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!--/.content-->
				</div>
				<!--/.span9-->
			</div>
		</div>
		<!--/.container-->
	</div>
	<!--/.wrapper-->
	<div class="footer">
		<%@include file="footer.jsp"%>
	</div>
</body>
<script type="text/javascript">
	// validate Full Name
	$(document)
			.ready(
					function() {

						$('#formFullName')
								.validate(
										{
											rules : {
												txtFirstName : {
													required : true,
													rangelength : [ 1, 10 ]
												},
												txtLastName : {
													required : true,
													rangelength : [ 1, 20 ]
												},
												txtMidName : {
													rangelength : [ 0, 20 ]
												}
											},
											messages : {
												txtFirstName : {
													required : "What's your First Name?",
													rangelength : "Error invalid First Name. Please re-send using a valid 1 or 10 letters"
												},
												txtLastName : {
													required : "What's your Last Name?",
													rangelength : "Error invalid Last Name. Please re-send using a valid 1 or 20 letters"
												},
												txtMidName : {
													rangelength : "Error invalid Mid Name. Please re-send using a valid 0 or 20 letters"
												}
											},
											highlight : function(element) {
												$(element).closest('.field')
														.removeClass('success')
														.addClass('error');
											},
											success : function(element) {
												element.text('').addClass(
														'valid').closest(
														'.field').removeClass(
														'error').addClass(
														'success');
											}
										});

					});

	// validate ID Card Number
	$(document)
			.ready(
					function() {

						$('#formIDCardNumber')
								.validate(
										{
											rules : {
												txtIdCardNumber : {
													required : true,
													number : true,
													rangelength : [ 9, 12 ]
												}
											},
											messages : {
												txtIdCardNumber : {
													required : "What's your ID Card Number?",
													number : "Please enter valid number.",
													rangelength : "Error invalid ID Card Number. Please re-send using a valid 9 or 12 digit number."
												}
											},
											highlight : function(element) {
												$(element).closest('.field')
														.removeClass('success')
														.addClass('error');
											},
											success : function(element) {
												element.text('').addClass(
														'valid').closest(
														'.field').removeClass(
														'error').addClass(
														'success');
											}
										});

					});
	
	// validate Phone Number
	$(document)
			.ready(
					function() {

						$('#formPhone')
								.validate(
										{
											rules : {
												txtPhone1 : {
													required : true,
													number : true,
													rangelength : [ 9, 12 ]
												},
												txtPhone2 : {													
													number : true,
													rangelength : [ 9, 12 ]
												}
											},
											messages : {
												txtPhone1 : {
													required : "What's your Phone 1 Number?",
													number : "Please enter valid number.",
													rangelength : "Error invalid Phone 1 Number. Please re-send using a valid 9 or 12 digit number."
												},
												txtPhone2 : {
													number : "Please enter valid number.",
													rangelength : "Error invalid Phone 1 Number. Please re-send using a valid 9 or 12 digit number."
												}
											},
											highlight : function(element) {
												$(element).closest('.field')
														.removeClass('success')
														.addClass('error');
											},
											success : function(element) {
												element.text('').addClass(
														'valid').closest(
														'.field').removeClass(
														'error').addClass(
														'success');
											}
										});

					});
	
	// validate Email
	$(document)
			.ready(
					function() {

						$('#formEmail')
								.validate(
										{
											rules : {
												txtEmail1 : {
													required : true,
													email: true,
													rangelength : [ 1, 50 ]
												},
												txtEmail2 : {	
													email: true,
													rangelength : [ 0, 50 ]
												}
										
											},
											messages : {
												txtEmail1 : {
													required : "What's your Email?",
													email: "Invalid Email",
													rangelength : "Error invalid Email 1. Please re-send using a valid 1 or 50 letters."
												},
												txtEmail2 : {
													email: "Invalid Email",
													rangelength : "Error invalid Email 2. Please re-send using a valid 0 or 50 letters."
												}
											},
											highlight : function(element) {
												$(element).closest('.field')
														.removeClass('success')
														.addClass('error');
											},
											success : function(element) {
												element.text('').addClass(
														'valid').closest(
														'.field').removeClass(
														'error').addClass(
														'success');
											}
										});

					});
	
	// validate Address
	$(document)
			.ready(
					function() {

						$('#formAddress')
								.validate(
										{
											rules : {
												txtAddress1 : {
													required : true,
													rangelength : [ 1, 150 ]
												},
												txtAddress2 : {													
													rangelength : [ 0, 150 ]
												}
										
											},
											messages : {
												txtAddress1 : {
													required : "What's your Address 1?",
													rangelength : "Error invalid Address1. Please re-send using a valid 1 or 150 letters."
												},
												txtAddress2 : {
													rangelength : "Error invalid Address2. Please re-send using a valid 0 or 150 letters."
												}
											},
											highlight : function(element) {
												$(element).closest('.field')
														.removeClass('success')
														.addClass('error');
											},
											success : function(element) {
												element.text('').addClass(
														'valid').closest(
														'.field').removeClass(
														'error').addClass(
														'success');
											}
										});

					});
	

	// validate password
	$(document)
			.ready(
					function() {

						$('#formUpdatePassword')
								.validate(
										{
											rules : {
												oldPassword : {
													required : true,
													rangelength : [ 6, 20 ]
												},
												newPassword : {	
													required : true,
													rangelength : [ 6, 20 ]
												},
												confirmNewPassword : {	
													required : true,
													rangelength : [ 6, 20 ]
												}
										
											},
											messages : {
												oldPassword : {
													required : "Please enter your password!",
													rangelength : "Error invalid password. Please re-send using a valid 6 or 20 letters."
												},
												newPassword : {
													required : "Please enter new password!",
													rangelength : "Error invalid password. Please re-send using a valid 6 or 20 letters."
												},
												confirmNewPassword : {
													required : "Please enter confirm password!",
													rangelength : "Error invalid password. Please re-send using a valid 6 or 20 letters."
												}
											},
											highlight : function(element) {
												$(element).closest('.field')
														.removeClass('success')
														.addClass('error');
											},
											success : function(element) {
												element.text('').addClass(
														'valid').closest(
														'.field').removeClass(
														'error').addClass(
														'success');
											}
										});

					});
	
	
	$(document).ready(function() {
		$("#chkTimeOut").click(function() {
			var checkbox = document.getElementById("chkTimeOut");
			if (checkbox.checked == true) {
				document.getElementById("txtTimeOut").value = "30";
			} else {
				document.getElementById("txtTimeOut").value = "0";
			}
		});

		$("#editFullName").click(function() {
			var value = document.getElementById("editFullName").innerHTML;
			if (value == "Edit") {
				$("#panelFullname").slideDown("slow");
				document.getElementById("editFullName").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelFullname").slideUp("slow");
				document.getElementById("editFullName").innerHTML = "Edit";
			}
		});

		$("#editCardNumber").click(function() {
			var value = document.getElementById("editCardNumber").innerHTML;
			if (value == "Edit") {
				$("#panelCardNumber").slideDown("slow");
				document.getElementById("editCardNumber").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelCardNumber").slideUp("slow");
				document.getElementById("editCardNumber").innerHTML = "Edit";
			}
		});

		$("#editPassword").click(function() {
			var value = document.getElementById("editPassword").innerHTML;
			if (value == "Edit") {
				$("#panelPassword").slideDown("slow");
				document.getElementById("editPassword").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelPassword").slideUp("slow");
				document.getElementById("editPassword").innerHTML = "Edit";
			}
		});

		$("#editPhone").click(function() {
			var value = document.getElementById("editPhone").innerHTML;
			if (value == "Edit") {
				$("#panelPhone").slideDown("slow");
				document.getElementById("editPhone").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelPhone").slideUp("slow");
				document.getElementById("editPhone").innerHTML = "Edit";
			}
		});

		$("#editAddress").click(function() {
			var value = document.getElementById("editAddress").innerHTML;
			if (value == "Edit") {
				$("#panelAddress").slideDown("slow");
				document.getElementById("editAddress").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelAddress").slideUp("slow");
				document.getElementById("editAddress").innerHTML = "Edit";
			}
		});

		$("#editEmail").click(function() {
			var value = document.getElementById("editEmail").innerHTML;
			if (value == "Edit") {
				$("#panelEmail").slideDown("slow");
				document.getElementById("editEmail").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelEmail").slideUp("slow");
				document.getElementById("editEmail").innerHTML = "Edit";
			}
		});

		$("#editTimeOut").click(function() {
			var value = document.getElementById("editTimeOut").innerHTML;
			if (value == "Edit") {
				$("#panelTimeOut").slideDown("slow");
				document.getElementById("editTimeOut").innerHTML = "Hide";
			}
			if (value == "Hide") {
				$("#panelTimeOut").slideUp("slow");
				document.getElementById("editTimeOut").innerHTML = "Edit";
			}
		});

	});

	$(function() {
		$('#searchAlert').css("margin-left", "20%");
		if ($('#searchAlert').text() == '') {
			$('#searchAlert').css('display', 'none');
		} else {
			$('#searchAlert').fadeOut(4000);
		}

	});
</script>
</html>
